<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买审批</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/ssmzy05/static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/ssmzy05/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/ssmzy05/static/css/index.css">
    <style>
        #selectForm {
            margin-left: 55px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    搜索-->
    <el-form id="selectForm" :inline="true" :model="selectForm" class="demo-form-inline">
        <el-form-item label="部门">
            <el-input v-model="selectForm.deptName" placeholder="部门"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
            <el-input v-model="selectForm.username" placeholder="申请人"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="addPopUpWindow"></el-button>
        </el-form-item>
    </el-form>

    <!--数据-->
    <el-table
            :data="purchaseApply"
            style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-table :data="props.row.children">
                    <el-table-column label="编号" prop="id"></el-table-column>
                    <el-table-column label="申请编号" prop="purchaseApplyId"></el-table-column>
                    <el-table-column label="物品名称" prop="goodsname"></el-table-column>
                    <el-table-column label="数量" prop="goodsCount"></el-table-column>
                    <el-table-column label="市场价" prop="marketPrice"></el-table-column>
                    <el-table-column label="批发价" prop="tradePrice"></el-table-column>
                    <el-table-column label="采购价" prop="purchasePrice"></el-table-column>
                    <el-table-column label="金额" prop="money"></el-table-column>
                    <el-table-column label="需求时间" prop="requiredTime"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button :disabled="props.row.status == 0 || props.row.status == 2 ? true:false"
                                       @click="updatePurchaseApplyDetailPopUpWindow(scope.row.id)" type="success"
                                       size="small">编辑
                            </el-button>
                            <el-button :disabled="props.row.status == 0 || props.row.status == 2 ? true:false" type="danger" size="small"
                                       @click="deletePurchaseApplyDetailPopUpWindow(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column
                label="编号"
                prop="id"
                whidth="100">
        </el-table-column>
        <el-table-column
                label="呈批部门"
                prop="deptName">
        </el-table-column>
        <el-table-column
                label="申请人"
                prop="username">
        </el-table-column>
        <el-table-column
                label="申请时间"
                prop="applyTime">
        </el-table-column>
        <el-table-column
                label="用途"
                prop="uses">
        </el-table-column>
        <el-table-column
                label="备注"
                prop="remark">
        </el-table-column>
        <el-table-column
                label="状态"
                prop="status"
                width="250">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status == 0 ? true : false"
                        active-text="已提交"
                        active-color="#13ce66"
                        inactive-text="未提交"
                        inactive-color="#ff4949"
                        :disabled="scope.row.status == 0 ? true : false"
                        @change="updateStatus($event,scope.row.id)"
                v-if="scope.row.status != 2 && scope.row.status != 3">
                </el-switch>
                <el-tag type="success" v-if="scope.row.status == 2">通过</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 3">未通过</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button @click="updatePopUpWindow(scope.row.id)" type="success" size="small"
                           :disabled="scope.row.status == 0 || scope.row.status == 2 ? true:false">编辑
                </el-button>
                <el-button type="primary" size="small" @click="addpurchaseApplyDetailPopUpWindow(scope.row.id)"
                           :disabled="scope.row.status == 0 || scope.row.status == 2 ? true:false">添加明细
                </el-button>
                <el-button type="danger" size="small" @click="deletePurchaseApply(scope.row.id)"
                           :disabled="scope.row.status == 0 || scope.row.status == 2 ? true:false">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--    添加表单-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="cancelPopUpWindow">
        <el-form :model="addpurchaseApplyForm">
            <el-form-item label="呈批部门" :label-width="formLabelWidth">
                <el-select v-model="addpurchaseApplyForm.deptId" placeholder="请选择">
                    <el-option
                            v-for="item in department"
                            :key="item.id"
                            :label="item.deptName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请人" :label-width="formLabelWidth">
                <el-select v-model="addpurchaseApplyForm.consumerId" placeholder="请选择">
                    <el-option
                            v-for="item in consumer"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="addpurchaseApplyForm.applyTime"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用途" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyForm.uses" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyForm.remark" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="状态" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyForm.status" autocomplete="off"></el-input>
            </el-form-item>-->

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelPopUpWindow()">取 消</el-button>
            <el-button type="primary" @click="commit">确 定</el-button>
        </div>
    </el-dialog>
    <!--    添加购买明细-->
    <el-dialog :title="titleDetail" :visible.sync="dialogFormVisibleDetail" :before-close="cancelPopUpWindowDetail">
        <el-form :model="addpurchaseApplyDetailForm">
            <el-form-item label="申请编号" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.purchaseApplyId" autocomplete="off"
                          :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="物品编号" :label-width="formLabelWidth">
                <el-select v-model="addpurchaseApplyDetailForm.goodsId" @change="padSelect" placeholder="请选择">
                    <el-option
                            v-for="item in goods"
                            :key="item.id"
                            :label="item.goodsname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="goodsTable != null && goodsTable.length > 0">
                <el-table :data="goodsTable"
                          style="width: 100%;align-content: center">
                    <el-table-column label="编号" prop="id"></el-table-column>
                    <el-table-column label="物品名称" prop="goodsname" width="100"></el-table-column>
                    <el-table-column label="品牌" prop="brand"></el-table-column>
                    <el-table-column label="规格" prop="spec"></el-table-column>
                    <el-table-column label="物品数量" prop="goodsCount"></el-table-column>
                    <el-table-column label="物品金额" prop="totalMoney"></el-table-column>
                    <el-table-column label="登记日期" prop="recordDate"></el-table-column>
                    <el-table-column label="登记人" prop="recordUserId"></el-table-column>
                    <el-table-column label="备注" prop="remark" width="200"></el-table-column>
                    <el-table-column label="用品分类" prop="classifyId"></el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.goodsCount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市场价" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.marketPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="批发价" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.tradePrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="采购价" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.purchasePrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="金额" :label-width="formLabelWidth">
                <el-input v-model="addpurchaseApplyDetailForm.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="需求时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="addpurchaseApplyDetailForm.requiredTime"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelPopUpWindowDetail()">取 消</el-button>
            <el-button type="primary" @click="commitDetta">确 定</el-button>
        </div>
    </el-dialog>
    <!--    添加审批流程-->
    <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="cancelPopUpWindowExamine">
        <div>标题：<el-input v-model="titleExamineInput" size="small" style="width: 120px" placeholder="标题"></el-input></div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelPopUpWindowExamine">取 消</el-button>
            <el-button type="primary" @click="onCommit">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            purchaseApply: [],
            selectForm: {
                deptName: '',
                username: ''
            },
            addpurchaseApplyForm: {
                id: '',
                deptId: '',
                consumerId: '',
                applyTime: new Date(),
                uses: '',
                remark: '',
            },
            addpurchaseApplyDetailForm: {
                id: '',
                purchaseApplyId: '',
                goodsId: '',
                goodsCount: '',
                marketPrice: '',
                tradePrice: '',
                purchasePrice: '',
                money: '',
                requiredTime: new Date(),
            },
            dialogFormVisible: false,
            dialogFormVisibleDetail: false,
            dialogVisible: false,
            formLabelWidth: '120px',
            department: [],
            consumer: [],
            goods: [],
            goodsTable: [],
            controls: 0,
            title: '',
            titleDetail: '添加明细',
            titleExamineInput: '',
            code: 0,
            updateStatusE: false,
            updateStatusId: 0
        },
        methods: {
            MyInit() {
                let vue = this;
                let url = "http://localhost:8080/ssmzy05/purchaseApply/getPurchaseApply";
                if (vue.selectForm.deptName != '' && vue.selectForm.username != '')
                    url = url + "/" + vue.selectForm.deptName + "/" + vue.selectForm.username;
                else if (vue.selectForm.username != '')
                    url = url + "/" + null + "/" + vue.selectForm.username;
                else if (vue.selectForm.deptName != '')
                    url = url + "/" + vue.selectForm.deptName + "/" + null;
                else
                    url = url + "/" + null + "/" + null;
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: "json",
                    success: function (resp) {
                        vue.purchaseApply = resp;
                    }
                })
            },
            MyInitDept() {
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/department/querAll",
                    dataType: "json",
                    success: function (resp) {
                        vue.department = resp;
                    }
                })
            },
            MyInitConsumer() {
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/consumer/queryAll",
                    dataType: "json",
                    success: function (resp) {
                        vue.consumer = resp;
                    }
                })
            },
            MyInitGoods() {
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/goods/queryAll",
                    dataType: "json",
                    success: function (resp) {
                        vue.goods = resp;
                    }
                })
            },
            onSubmit() {
                this.MyInit();
            },
            padSelect(e) {
                this.goodsTable = [];
                this.goods.forEach(itemgood => {
                    if (itemgood.id == e) {
                        this.goodsTable.unshift(itemgood);
                    }
                })
            },
            addPopUpWindow() {
                this.title = '添加'
                this.controls = 0;
                this.dialogFormVisible = true;
            },
            addpurchaseApplyDetailPopUpWindow(id) {
                this.addpurchaseApplyDetailForm.purchaseApplyId = id
                this.titleDetail = '添加'
                this.controls = 0;
                this.dialogFormVisibleDetail = true;
            },
            updatePopUpWindow(id) {
                this.title = '编辑'
                this.controls = 1;
                this.dialogFormVisible = true;
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/purchaseApply/paId/" + id,
                    dataType: "json",
                    success: function (resp) {
                        vue.addpurchaseApplyForm.id = resp.id;
                        vue.addpurchaseApplyForm.deptId = resp.deptId;
                        vue.addpurchaseApplyForm.consumerId = resp.consumerId;
                        vue.addpurchaseApplyForm.applyTime = resp.applyTime;
                        vue.addpurchaseApplyForm.uses = resp.uses;
                        vue.addpurchaseApplyForm.remark = resp.remark;
                        vue.addpurchaseApplyForm.status = resp.status;
                    }
                })
            },
            updatePurchaseApplyDetailPopUpWindow(id) {
                this.title = '编辑'
                this.controls = 1;
                this.dialogFormVisibleDetail = true;
                this.addpurchaseApplyDetailForm.id = id;
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/purchaseApplyDetail/" + id,
                    dataType: "json",
                    success: function (resp) {
                        this.goodsTable = [];
                        vue.goods.forEach(itemgood => {
                            if (itemgood.id == resp.goodsId) {
                                vue.goodsTable.unshift(itemgood);
                            }
                        })
                        vue.addpurchaseApplyDetailForm.purchaseApplyId = resp.purchaseApplyId;
                        vue.addpurchaseApplyDetailForm.goodsId = resp.goodsId;
                        vue.addpurchaseApplyDetailForm.goodsCount = resp.goodsCount;
                        vue.addpurchaseApplyDetailForm.marketPrice = resp.marketPrice;
                        vue.addpurchaseApplyDetailForm.tradePrice = resp.tradePrice;
                        vue.addpurchaseApplyDetailForm.purchasePrice = resp.purchasePrice;
                        vue.addpurchaseApplyDetailForm.money = resp.money;
                        vue.addpurchaseApplyDetailForm.requiredTime = resp.requiredTime;
                    }
                })
            },
            deletePurchaseApply(id) {
                let vue = this;
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: "delete",
                        url: "http://localhost:8080/ssmzy05/purchaseApply/delete/" + id,
                        dataType: "json",
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    type: 'success',
                                    message: resp.message
                                });
                                vue.MyInit();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deletePurchaseApplyDetailPopUpWindow(id) {
                let vue = this;
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: "delete",
                        url: "http://localhost:8080/ssmzy05/purchaseApplyDetail/delete/" + id,
                        dataType: "json",
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    type: 'success',
                                    message: resp.message
                                });
                                vue.MyInit();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cancelPopUpWindow() {
                this.dialogFormVisible = false;
                this.addpurchaseApplyForm.deptId = '';
                this.addpurchaseApplyForm.consumerId = '';
                this.addpurchaseApplyForm.applyTime = new Date();
                this.addpurchaseApplyForm.uses = '';
                this.addpurchaseApplyForm.remark = '';
                this.addpurchaseApplyForm.status = '';
            },
            cancelPopUpWindowDetail() {
                this.dialogFormVisibleDetail = false;
                this.addpurchaseApplyDetailForm.purchaseApplyId = '';
                this.addpurchaseApplyDetailForm.goodsId = '';
                this.addpurchaseApplyDetailForm.goodsCount = '';
                this.addpurchaseApplyDetailForm.marketPrice = '';
                this.addpurchaseApplyDetailForm.tradePrice = '';
                this.addpurchaseApplyDetailForm.purchasePrice = '';
                this.addpurchaseApplyDetailForm.money = '';
                this.addpurchaseApplyDetailForm.requiredTime = new Date();
                this.goodsTable = [];
            },
            cancelPopUpWindowExamine() {
                this.dialogVisible = false;
                this.titleExamineInput = '';
            },
            commit() {
                let vue = this;
                if (vue.controls == 0) {
                    $.ajax({
                        type: 'post',
                        url: 'http://localhost:8080/ssmzy05/purchaseApply/add',
                        dataType: 'json',
                        contentType: "application/json",
                        data: JSON.stringify(vue.addpurchaseApplyForm),
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    message: resp.message,
                                    type: 'success'
                                });
                                vue.MyInit();
                                vue.cancelPopUpWindow();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                } else if (vue.controls == 1) {
                    $.ajax({
                        type: 'put',
                        url: 'http://localhost:8080/ssmzy05/purchaseApply/update',
                        dataType: 'json',
                        contentType: "application/json",
                        data: JSON.stringify(vue.addpurchaseApplyForm),
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    message: resp.message,
                                    type: 'success'
                                });
                                vue.MyInit();
                                vue.cancelPopUpWindow();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                }
                console.log(this.addpurchaseApplyForm)
            },
            commitDetta() {
                let vue = this;
                if (vue.controls == 0) {
                    $.ajax({
                        type: 'post',
                        url: 'http://localhost:8080/ssmzy05/purchaseApplyDetail/add',
                        dataType: 'json',
                        contentType: "application/json",
                        data: JSON.stringify(vue.addpurchaseApplyDetailForm),
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    message: resp.message,
                                    type: 'success'
                                });
                                vue.MyInit();
                                vue.cancelPopUpWindowDetail();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                } else if (vue.controls == 1) {
                    $.ajax({
                        type: 'put',
                        url: 'http://localhost:8080/ssmzy05/purchaseApplyDetail/update',
                        dataType: 'json',
                        contentType: "application/json",
                        data: JSON.stringify(vue.addpurchaseApplyDetailForm),
                        success: function (resp) {
                            if (resp.code == 200) {
                                vue.$message({
                                    message: resp.message,
                                    type: 'success'
                                });
                                vue.MyInit();
                                vue.cancelPopUpWindowDetail();
                            } else {
                                vue.$message.error(resp.message);
                            }
                        }
                    })
                }
            },
            onCommit() {
                if (this.updateStatusE)
                    this.code = 1;
                else
                    this.code = 0;
                let vue = this;
                let dataJson = {'title': this.titleExamineInput, 'status': 1, 'padId': this.updateStatusId};
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:8080/ssmzy05/examineFlowDetail/add/',
                    dataType: 'json',
                    data: dataJson,
                    success: function (resp) {
                        console.log(resp);
                        if (resp.code == 200){
                            $.ajax({
                                type:'put',
                                url:'http://localhost:8080/ssmzy05/purchaseApply/updateStatus/'+vue.updateStatusId+"/0",
                                dataType:'json',
                                success : function (resp) {
                                    if (resp.code == 200){
                                        vue.$message({
                                            message: resp.message,
                                            type: 'success'
                                        });
                                        vue.MyInit();
                                        vue.cancelPopUpWindowExamine();
                                    }else {
                                        vue.$message.error(resp.message);
                                    }
                                }
                            })
                            vue.MyInit();
                            vue.cancelPopUpWindow();
                        }else {
                            vue.$message.error(resp.message);
                        }
                    }
                })
            },
            updateStatus(e, id) {
                this.dialogVisible = true;
                this.updateStatusE = e;
                this.updateStatusId = id;
            }
        },
        mounted() {
            this.MyInit()
            this.MyInitDept()
            this.MyInitConsumer()
            this.MyInitGoods()
        }
    })
</script>
</body>
</html>